<template>
    <div class="header-contain">
        <div class="left">
            <div v-for="(item, idx) in headerList" :key="idx" class="contain" @mouseenter="enterHead(idx)" :ref="`contain${idx}`"
                @mouseleave="leaveHead(idx)">
                <!-- <span :class="{'bread-crumb': true, activeColor: headerList.length-1 === idx}"
                    @click="jumpPage(item)">{{item}}</span>
                <img src="../../src/assets/img/welcome/line.png" alt="" class="line" v-if="headerList.length-1 !== idx">
                <img src="../../src/assets/img/welcome/lineLast.png" alt="" class="line" v-else> -->
                <div @click="jumpPage(item)" :class="{activeColor: headerList.length-1 === idx}">
                    {{item.name}}</div>
                <div class="arrow" v-if=" headerList.length-1 !== idx" ref="arrow">
                    <span ref="arrowSpan"></span>
                </div>
            </div>
        </div>
        <div class="right">
            <img src="../../src/assets/img/welcome/studentPerson.png" alt="">
            <div class="name-content">
                <span>欢迎, 王美娜同学</span>
            </div>
            <div class="out-btn my-class" @mouseenter="enterClass" @mouseleave="leaveClass" @click="jumpClass()">
                <img src="../../src/assets/img/welcome/greyBook.png" alt="" class='out-img' v-if="!showWhiteClass">
                <img src="../../src/assets/img/welcome/greenBook.png" alt="" class='out-img' v-else>
                <span>我的班级</span>
            </div>
            <div class="out-btn" @mouseenter="enter" @mouseleave="leave">
                <img src="../../src/assets/img/welcome/greyArrow.png" alt="" class='out-img' v-if="!showWhite">
                <img src="../../src/assets/img/welcome/greenArrow.png" alt="" class='out-img' v-else>
                <span>退出</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Header',
    data() {
        return {
            showWhite: false,
            showWhiteClass: false

        }
    },
    methods: {
        enter() {
            this.showWhite = true
        },
        leave() {
            this.showWhite = false
        },
        enterClass() {
            this.showWhiteClass = true
        },
        leaveClass() {
            this.showWhiteClass = false
        },
        jumpPage(item) {
            // console.log($route)
            // if (it === '在线课堂') {
            //     this.$router.push({
            //         path: '/studentMange', //跳转的路径
            //     })
            // }
            this.$router.push({
                path: item.path //跳转的路径
            })
        },
        jumpClass() {
            this.$router.push({
                path: '/myClass' //跳转的路径
            })
        },
        enterHead(index) {
            if (index !== 0) {
                let idx = index - 1
                this.$refs[`contain${idx}`][0].style.borderRight = ' 1px solid transparent'
                // // arrow
                // this.$refs[`contain${idx}`][0].getElementsByClassName('arrow')[0].style.top =
                //     '32px';
                this.$refs[`contain${idx}`][0].getElementsByClassName('arrow')[0].style.right =
                        '-27px'
                this.$refs[`contain${idx}`][0].getElementsByClassName('arrow')[0].style.borderLeft =
                        '6px solid transparent'
                this.$refs[`contain${idx}`][0].getElementsByClassName('arrow')[0].style
                    .borderBottom =
                        '6px solid transparent'

                this.$refs[`contain${idx}`][0].getElementsByClassName('arrow')[0].style
                    .borderTop =
                        '6px solid transparent'
            }
            this.$refs[`contain${index}`][0].style.borderRight = ' 1px solid transparent'
            this.$refs[`contain${index}`][0].getElementsByClassName('arrow')[0].style.right =
                    '-27px'
            this.$refs[`contain${index}`][0].getElementsByClassName('arrow')[0].style.borderLeft =
                    '6px solid transparent'
            this.$refs[`contain${index}`][0].getElementsByClassName('arrow')[0].style
                .borderBottom =
                    '6px solid transparent'

            this.$refs[`contain${index}`][0].getElementsByClassName('arrow')[0].style
                .borderTop =
                    '6px solid transparent'
        },
        leaveHead(index) {
            if (index !== 0) {
                let idx = index - 1
                this.$refs[`contain${idx}`][0].style.borderRight = ' 1px solid #E7E7E7'
                // // arrow
                // this.$refs[`contain${idx}`][0].getElementsByClassName('arrow')[0].style.top =
                //     '32px';
                this.$refs[`contain${idx}`][0].getElementsByClassName('arrow')[0].style.right =
                        '-26px'
                this.$refs[`contain${idx}`][0].getElementsByClassName('arrow')[0].style.borderLeft =
                        '6px solid #E7E7E7'
                this.$refs[`contain${idx}`][0].getElementsByClassName('arrow')[0].style
                    .borderBottom =
                        '6px solid transparent'

                this.$refs[`contain${idx}`][0].getElementsByClassName('arrow')[0].style
                    .borderTop =
                        '6px solid transparent'
            }

            this.$refs[`contain${index}`][0].style.borderRight = ' 1px solid #E7E7E7'
            this.$refs[`contain${index}`][0].getElementsByClassName('arrow')[0].style.right =
                    '-26px'
            this.$refs[`contain${index}`][0].getElementsByClassName('arrow')[0].style.borderLeft =
                    '6px solid #E7E7E7'
            this.$refs[`contain${index}`][0].getElementsByClassName('arrow')[0].style
                .borderBottom =
                    '6px solid transparent'

            this.$refs[`contain${index}`][0].getElementsByClassName('arrow')[0].style
                .borderTop =
                    '6px solid transparent'
        }

    },
    props: {
        headerList: {
            type: Array,
            default: function () {
                return []
            }

        }
    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    .out-btn {
        cursor: pointer;
        width: 73px;
        height: 34px;
        border-radius: 2px;
        // opacity: 0.2733;
        border: 1px solid rgba(169, 169, 169, 0.2733);
        font-size: 14px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(105, 123, 140, 1);

        &:hover {
            color: rgba(83, 204, 144, 1);
        }

        .out-img {
            width: 10px;
            height: 12px;
            position: relative;
            left: 13px;
            top: 8px;
        }

        span {
            position: relative;
            left: 13px;
            top: 7px;
        }
    }

    .left {
        width: calc(100% - 420px);
        text-align: left;
        float: left;
        color: #697B8C;

        .bread-crumb {
            cursor: pointer;
        }

        .activeColor {
            color: #53CC90;
        }

        span {
            position: relative;
            top: -32px;
            /*left: -8px;*/
        }

        img {
            margin-left: 20px;
        }

        div {
            display: inline-block;
            padding: 0px 10px;
        }

        .line {
            height: 80px;
            width: 5px;
        }

        // div:first-child {
        //     padding-left: 22px;
        // }

        // 箭头
        .contain {
            height: 80px;
            border-right: solid 1px #E7E7E7;
            display: inline-block;
            line-height: 80px;
            position: relative;
            padding: 0px 10px;
            cursor: pointer
        }

        .contain:hover {
            background: rgba(83, 204, 144, 0.1);
            color: #53CC90;
            border-right: 1px solid transparent;

        }

        .contain:hover .arrow span {
            border-left: 5px solid rgba(83, 204, 144, 0.1);
            border-bottom: 5px solid transparent;
            border-top: 5px solid transparent;
            z-index: 1000;

        }

        .contain:hover .arrow {
            // border: 8px solid rgba(83, 204, 144, 0.1);
            border-left: 6px solid transparent;
            z-index: 1000;
            // left: 95px;
            right: -27px;
            top: 32px;

        }

        .arrow {
            width: 0;
            height: 0;
            border-left: 6px solid #E7E7E7;
            border-bottom: 6px solid transparent;
            border-top: 6px solid transparent;
            position: absolute;
            // left: 96px;
            top: 34px;
            right: -26px;
            z-index: 1000
        }

        .arrow span {
            display: block;
            width: 0;
            height: 0;
            border-left: 4px solid #fff;
            border-bottom: 4px solid transparent;
            border-top: 4px solid transparent;
            position: absolute;
            top: -4px;
            left: -6px;
        }
    }

    .right {
        text-align: left;
        width: 390px;
        /*line-height: 80px;*/
        float: right;
        padding-right: 30px;
        .flex(row, space-between, center, nowrap);

        img {
            height: 48px;
            display: inline-block;
            position: relative;
            top: 12px;
        }

        .name-content {
            width: 150px;
            position: relative;
            top: 10px;
            left: 4px;

            span {
                font-family: PingFang-SC-Regular;
                font-weight: 400;
                color: rgba(105, 123, 140, 1);
                margin-left: 10px;
            }

            .grey-name {
                font-size: 12px;
                font-family: PingFang-SC-Regular;
                font-weight: 400;
                color: rgba(105, 123, 140, 1);
                position: relative;
                top: 4px;
            }
        }

        .out-btn {
            position: relative;
            top: 13px;
        }

        .my-class {
            width: 108px;
            margin-right: 16px;

            img {
                width: 14px;
                height: 14px;
                top: 9px;
            }
        }
    }

</style>
